<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="活动名称">
                <el-input v-model="form.title" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="form.articleCategory" placeholder="请选择活动区域">
                    <el-option
                            v-for="item in options"
                            :key="item._id"
                            :label="item.title"
                            :value="item._id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传图片">
                <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:5000/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <quillEditor v-model="form.content"></quillEditor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {quillEditor} from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    export default {
        components: {
            quillEditor
        },
        name: "Article",
        data() {
            return {
                form: {
                    title: '',
                    articleCategory: '',
                    content: '',
                    imageUrl: ''
                },
                options: [],
            }
        },
        created() {
            this.getCatory()
        },
        methods: {
            async getCatory() {
                try {
                    const {result} = await this.get(this.$api.articleTitleModel.articleTitle)
                    this.options = result
                    console.log(this.options);
                } catch (e) {
                    console.log(e);
                }
            },
            handleAvatarSuccess(res) {
                console.log(res);
                this.form.imageUrl = res.result.url
            },
            async onSubmit() {
                try {
                    const {result} = await this.post(this.$api.articleModel.articleAdd, this.form)
                    this.$router.push('/backstage/article/list')
                } catch (e) {
                    console.log(e);
                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    .avatar-uploader .el-upload
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

    .avatar-uploader .el-upload:hover
        border-color: #409EFF;

    .avatar-uploader-icon
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9;

    .avatar
        width: 178px;
        height: 178px;
        display: block;

</style>